<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Analog Gauge Widget</title>
<style>
	@import "../_Gauge.css";
	@import "../../../dojo/resources/dojo.css";
	@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
	djConfig = {
		parseOnLoad: true,
		isDebug: true
	};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js" dojoConfig="parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require('dojox.gauges.AnalogGauge');
	dojo.require('dojox.gauges.AnalogArcIndicator');
	dojo.require('dojox.gauges.AnalogNeedleIndicator');
	dojo.require('dojox.gauges.AnalogArrowIndicator');
	dojo.require('dijit.form.Button');
	dojo.require('dojo.parser');
	dojo.ready(init);

	var gauge, valueIndicator, targetIndicator, handle;
	var ranges1 = [ {low:5, high:10, hover:'5 - 10'},
				   {low:10, high:20, hover:'10 - 20'},
				   {low:20, high:30, hover:'20 - 30'},
				   {low:30, high:40, hover:'30 - 40'},
				   {low:40, high:50, hover:'40 - 50'},
				   {low:50, high:60, hover:'50 - 60'},
				   {low:60, high:70, hover:'60 - 70'},
				   {low:70, high:75, hover:'70 - 75'}
				 ];
	var ranges2 = [ {low:5, high:10, hover:'5 - 10'},
				   {low:10, high:20, hover:'10 - 20'},
				   {low:20, high:30, hover:'20 - 30'},
				   {low:30, high:40, hover:'30 - 40'},
				   {low:40, high:50, hover:'40 - 50'},
				   {low:50, high:60, hover:'50 - 60'},
				   {low:60, high:70, hover:'60 - 70'},
				   {low:70, high:75, hover:'70 - 75'}
				 ];
	
	function init() {
		gauge = dojo.byId("defaultGauge");
		gauge = new dojox.gauges.AnalogGauge({
			id: "defaultGauge",
			width: 350,
			height: 200,
			cx: 175,
			cy: 175,
			radius: 125,
			ranges: ranges1,
			minorTicks: {
				offset: 125,
				interval: 2.5,
				length: 5,
				color: 'gray'
			},
			majorTicks: {
				offset: 125,
				interval: 5,
				length: 10
			},
			indicators: [
				new dojox.gauges.AnalogArrowIndicator({
					value:17, 
					width: 3,
					hover:'Value: 17', 
					title: 'Value'
				}),
				new dojox.gauges.AnalogLineIndicator({
					value:6, 
					color:'#D00000',
					width: 3,
					hover:'Target: 6',
					title: 'Target'
				})
			]
		}, gauge);
		gauge.startup();
		var g = gauge;
		var int = 10;
		dojo.connect(dijit.byId('changeTicks'), 'onClick', function(){
			var o = g.majorTicks;
			o.interval = ++int;
			g.setMajorTicks(o);
		});

		/* Entirely programmatic gauge (ranges, ticks, indicators, etc.) */
		var fill = {
			'type': 'linear',
			'x1': 0,
			'x2': 0,
			'y2': 0,
			'y1': gauge.height,
			'colors': [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
		};
		gauge = dojo.byId("programmaticGauge");
		gauge = new dojox.gauges.AnalogGauge({
			id: "programmaticGauge",
			width: 350,
			height: 200,
			cx: 175,
			cy: 175,
			radius: 125,
			background: fill,
			image: {
				url: "images/gaugeOverlay.png",
				width: 280,
				height: 155,
				x: 35,
				y: 38,
				overlay: true
			},
			useRangeStyles: 8
		}, gauge);
		gauge.startup();
		gauge.addRanges(ranges2);
		gauge.setMajorTicks({
			length: 5,
			interval: 5,
			offset: 125,
			font: {family: "Arial", style: "italic", variant: 'small-caps', weight: 'bold', size: "18px"}
		});
		valueIndicator = new dojox.gauges.AnalogArrowIndicator({
			value:17, 
			width: 3,
			hover:'Value: 17', 
			title: 'Value',
			easing: dojo.fx.easing.bounceOut
		});
		gauge.addIndicator(valueIndicator);
		targetIndicator = new dojox.gauges.AnalogLineIndicator({
			value:6, 
			color:'#D00000', 
			width: 3,
			hover:'Target: 6', 
			title: 'Target',
			// Can use string to indicate easing function (just like in de
			easing: 'dojo.fx.easing.linear'
		});
		gauge.addIndicator(targetIndicator);
		handle = setInterval((function(t, v){
			return (function(){
				t.update(Math.floor(Math.random() * 70) + 5);
				v.update(Math.floor(Math.random() * 70) + 5);
			});
		})(valueIndicator, targetIndicator), 3000);
		dojo.connect(dijit.byId('stop'), 'onClick', function(){
			clearInterval(handle);
		});

		gauge = dojo.byId("speedometer");
		gauge = new dojox.gauges.AnalogGauge({
			id: "speedometer",
			width:270,
			height: 230,
			cx: 135,
			cy: 135,
			radius: 125,
			image: {
				url: "images/flare.png",
				width: 112,
				height: 116,
				x: 140,
				y: 40,
				overlay: true
			},
			startAngle: -135,
			endAngle: 135,
			useRangeStyles: 8,
			ranges: [{low:0, high:180, color: 'black'}],
			majorTicks: {
				offset: 85,
				length: 10,
				interval: 20,
				color: 'gray'
			},
			minorTicks: {
				offset: 85,
				length: 5,
				interval: 5,
				color: 'gray'
			},
			indicators: [new dojox.gauges.AnalogNeedleIndicator({
							value:0, 
							width: 3,
							length: 100,
							hover:'Value: 0', 
							title: 'Value',
							color: 'red'
			})]
		}, gauge);
		gauge.startup();

		gauge = dojo.byId("tachometer");
		gauge = new dojox.gauges.AnalogGauge({
			id: "tachometer",
			width:270,
			height: 230,
			cx: 135,
			cy: 135,
			radius: 125,
			image: {
				url: "images/flare.png",
				width: 112,
				height: 116,
				x: 140,
				y: 40,
				overlay: true
			},
			startAngle: -135,
			endAngle: 135,
			useRangeStyles: 8,
			ranges: [{low:0, high:9000, color: 'black'}],
			majorTicks: {
				offset: 75,
				length: 10,
				color: 'gray',
				interval: 1000
			},
			minorTicks: {
				offset: 75,
				length: 5,
				color: 'gray',
				interval: 500
			},
			indicators: [new dojox.gauges.AnalogNeedleIndicator({
							value:0, 
							width: 3,
							length: 100,
							hover:'Value: 0', 
							title: 'Value',
							color: 'red'
			})]
		}, gauge);
		gauge.startup();

		// Used for a gradient arc indicator below:
		var fill = {
			'type': 'linear',
			'x1': 50,
			'y1': 50,
			'x2': 550,
			'y2': 550,
			'colors': [{offset: 0, color: 'black'}, {offset: 0.5, color: 'black'}, {offset: 0.75, color: 'yellow'}, {offset: 1, color: 'red'}]
		};
		gauge = dojo.byId("arctest");
		gauge = new dojox.gauges.AnalogGauge({
			id: "arctest",
			width: 650,
			height: 550,
			radius: 300,
			cx: 320,
			cy: 310,
			startAngle: -135,
			endAngle: 135,
			ranges: [
				{low: 0, high: 100, color: 'black'},
				{low: 100, high: 200, color: 'black'}
			],
			minorTicks: {
				offset: 235,
				interval: 5,
				length: 5,
				color: 'gray'
			},
			majorTicks: {
				offset: 235,
				interval: 10,
				length: 10,
				color: 'gray'
			},
			indicators: [new dojox.gauges.AnalogArcIndicator({
							value: 200, 
							width: 20,
							offset: 280,
							color: fill,
							noChange: true,
							hideValue: true
						}),
						new dojox.gauges.AnalogArcIndicator({
							value: 80, 
							width: 10,
							offset: 280,
							hover:'Arc: 80', 
							title: 'Arc',
							color: 'blue'
						}),
						new dojox.gauges.AnalogLineIndicator({
							value:6, 
							color:'#D00000', 
							width: 8,
							hover:'Target: 6', 
							title: 'Target',
							// Can use string to indicate easing function (just like in declarative version) 
							easing: 'dojo.fx.easing.linear'
						}),
						new dojox.gauges.AnalogArrowIndicator({
							value: 20, 
							width: 8,
							length: 300,
							hover:'Arrow: 20', 
							title: 'Arrow',
							color: 'red',
							easing: dojo.fx.easing.bounceOut
						}),
						new dojox.gauges.AnalogNeedleIndicator({
							value: 100, 
							width: 8,
							length: 300,
							hover: 'Needle: 100', 
							title: 'Needle',
							color: 'red'
						})
			]
		}, gauge);
		gauge.startup();

		var fill = {
			'type': 'linear',
			'x1': 0,
			'x2': 0,
			'y2': 0,
			'y1': gauge.height,
			'colors': [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
		};
		gauge.setBackground(fill);
	}
	dojo.addOnUnload(function(){
		clearInterval(handle);
	});
	
</script>
</head>
<body class="tundra">
<h1>Analog Gauge Widget</h1>
<h2>Default Colored Gauge</h2>
<div id="defaultGauge"></div>
<button dojoType="dijit.form.Button" id="changeTicks">Change Ticks</button>
<h2>CSS Themed Ranges, Image Overlay, Gradient Background, Updating to Random Values on 3s Timer</h2>
<div id="programmaticGauge"></div>
<button dojoType="dijit.form.Button" id="stop">Stop Timer</button>
<div style="float: left;">
	<h2>Speedometer</h2>
	<div id="speedometer"></div>
</div>
<div style="float: left;">
	<h2>Tachometer</h2>
	<div id="tachometer"></div>
</div>
<div style="clear: both;">
	<h2>Various Indicators Test</h2>
	<div id="arctest"></div>
</div>
<h2>Declarative, Gradient Ranges, Gradient Background, No Indicator Boxes</h2>
<div	dojoType="dojox.gauges.AnalogGauge"
		id="declarativeGauge"
		width="270"
		height="265"
		cx="110"
		cy="150"
		radius="125"
		startAngle="-45"
		endAngle="135"
		useRangeStyles="0"
		hideValues="true"
		majorTicks="{length: 5, offset: 125, interval: 5}"
		background="{
			'type': 'linear',
			'x1': 0,
			'y1': 265,
			'x2': 0,
			'y2': 0,
			'colors': [{offset: 0, color: '#ECECEC'}, {offset: 1, color: 'white'}]
		}">
	<div	dojoType="dojox.gauges.Range"
			low="5"
			high="10"
			hover="5 - 10"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#606060'}, {offset: 1, color: '#707070'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range1"
			low="10"
			high="20"
			hover="10 - 20"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#707070'}, {offset: 1, color: '#808080'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range2"
			low="20"
			high="30"
			hover="20 - 30"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#808080'}, {offset: 1, color: '#909090'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range3"
			low="30"
			high="40"
			hover="30 - 40"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#909090'}, {offset: 1, color: '#A0A0A0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range4"
			low="40"
			high="50"
			hover="40 - 50"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#A0A0A0'}, {offset: 1, color: '#B0B0B0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range5"
			low="50"
			high="60"
			hover="50 - 60"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#B0B0B0'}, {offset: 1, color: '#C0C0C0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range6"
			low="60"
			high="70"
			hover="60 - 70"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#D0D0D0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range7"
			low="70"
			high="75"
			hover="70 - 75"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#D0D0D0'}, {offset: 1, color: '#E0E0E0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.AnalogLineIndicator"
			id="target"
			value="6"
			color="#D00000"
			width="3"
			hover="Target: 6"
			title="Target">
	</div>
	<div 	dojoType="dojox.gauges.AnalogArrowIndicator"
			id="value"
			value="17"
			type="arrow"
			length="135"
			width="3"
			hover="Value: 17"
			title="Value">
	</div>
</div>
<h2>Declarative, (Ugly) Colored Ranges, No Numbers, No Indicator Boxes</h2>
<div	dojoType="dojox.gauges.AnalogGauge"
		id="declarativeGauge2"
		width="270"
		height="270"
		cx="135"
		cy="135"
		radius="125"
		startAngle="-90"
		endAngle="270"
		useRangeStyles="0"
		hideValues="true"
		background="{color: 'green'}">
	<div	dojoType="dojox.gauges.Range"
			low="5"
			high="10"
			hover="5 - 10"
			color="{color: 'red'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="10"
			high="20"
			hover="10 - 20"
			color="{color: '#FFA500'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="20"
			high="30"
			hover="20 - 30"
			color="{color: 'yellow'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="30"
			high="40"
			hover="30 - 40"
			color="{color: '#7FFF00'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="40"
			high="50"
			hover="40 - 50"
			color="{color: '#00FFFF'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="50"
			high="60"
			hover="50 - 60"
			color="{color: 'blue'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="60"
			high="70"
			hover="60 - 70"
			color="{color: '#191970'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="70"
			high="75"
			hover="70 - 75"
			color="{color: 'purple'}">
	</div>
	<div	dojoType="dojox.gauges.AnalogLineIndicator"
			value="6"
			color="#D00000"
			width="3"
			hover="Target: 6"
			title="Target">
	</div>
	<div 	dojoType="dojox.gauges.AnalogArrowIndicator"
			value="55"
			length="135"
			width="3"
			hover="Value: 55"
			title="Value">
	</div>
</div>
</body>
</html>
